<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3-07 线帽stroke-linecap</title>
</head>
<body>
  <svg width="400" height="400">
    <!-- 平头 -->
    <line
      x1="30"
      y1="30"
      x2="300"
      y2="30"
      stroke="blue"
      stroke-width="10"
      stroke-linecap="butt"
    />
  
    <!-- 圆头 -->
    <line
      x1="30"
      y1="70"
      x2="300"
      y2="70"
      stroke="blue"
      stroke-width="10"
      stroke-linecap="round"
    />
  
    <!-- 方头 -->
    <line
      x1="30"
      y1="110"
      x2="300"
      y2="110"
      stroke="blue"
      stroke-width="10"
      stroke-linecap="square"
    />
  </svg>
</body>
</html>